﻿@page "/butil/history"
@inherits AppComponentBase
@inject Bit.Butil.History history

<PageOutlet Url="butil/history"
            Title="History - Butil"
            Description="History class of the bit Butil" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>History</BitText>
    <br />
    <BitText Typography="BitTypography.Subtitle1" Gutter>
        How to use the History class of the bit Butil?
    </BitText>
    <br />

    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
        <div class="section-card-txt">
            To use the browser history features you need to inject the Bit.Butil.History class and use it like this:
<CodeBox HideCopyButton>
@@inject Bit.Butil.History history

@@code {
    await history.GoBack();
}</CodeBox>
        </div>
    </section>

    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
        <div class="section-card-txt">
            <br />
            <b>GetLength</b>: <br />
            Returns an Integer representing the number of elements in the session history, including the currently loaded page
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/length" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @getLengthExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitButton OnClick="@GetLength">GetLength</BitButton>
                        <br />
                        <br />
                        <div>History length is: @historyLength</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>SetScrollRestoration</b>, <b>GetScrollRestoration</b>: <br />
            Gets/Sets default scroll restoration behavior on history navigation. This property can be either auto or manual
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @setScrollRestorationExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitCheckbox @bind-Value="isScrollRestorationManual" Label="@(isScrollRestorationManual ? "Manual" : "Auto")" />
                        <br />
                        <BitButton OnClick="@SetScrollRestoration">SetScrollRestoration</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>GetState</b>: Returns an any value representing the state at the top of the history stack
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/state" target="_blank">MDN</a>).
            <br /><br />

            <b>GoBack</b>: <br />
            This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button.
            Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/back" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @goBackExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitButton OnClick="@(() => history.GoBack())">GoBack</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>GoForward</b>: <br />
            This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button.
            Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/forward" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @goForwardExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitButton OnClick="@(() => history.GoForward())">GoForward</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>Go</b>: <br />
            Asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page.
            Calling this method without parameters or a value of 0 reloads the current page
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/go" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @goExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitNumberField @bind-Value="delta" Mode="BitSpinButtonMode.Inline" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@Go">Go</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>PushState</b>: <br />
            Pushes the given data onto the session history stack with the specified title (and, if provided, URL)
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @pushStateExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="pushStateUrl" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@PushState">PushState</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>ReplaceState</b>: <br />
            Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @replaceStateExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="replaceStateUrl" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@ReplaceState">ReplaceState</BitButton>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>AddPopState</b>, <b>RemovePopState</b>: <br />
            The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event" target="_blank">MDN</a>).
        </div>
    </section>
</div>

<NavigationButtons Prev="Cookie" PrevUrl="/butil/cookie" Next="Element" NextUrl="/butil/element" />
